import { defineComponent, ref, onMounted, onUnmounted, nextTick, } from "vue"
import Maincontainer from "@/components/maincontainer";
import { NDropdown } from "naive-ui"

export default defineComponent({
    name: "kedao",
    setup() {
        // 所有图标列表
        const tableData = ref([
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
            { name: "接口收到能负数", },
        ])
        // 图标的风格
        const desktopSize = ref(110)
        // 图标的行数
        const rowsNum = ref(5)
        // 通过获取可视区域的行高，动态计算行数
        let linshi1: any = null
        const getrowsNum = () => {
            if (linshi1) {
                clearTimeout(linshi1)
            }
            linshi1 = setTimeout(() => {
                const clientHeight = document.documentElement.clientHeight
                // 通过计算行数，向下取整，不能小于1,,,,8是边距
                rowsNum.value = Math.floor((clientHeight - 40 - 32) / (desktopSize.value + 8)) || 1
                console.log("动态计算一次", rowsNum.value);
            }, 300)
        }
        // 打开的文件或者程序列表
        const openfileList = ref([])
        // 文件右键菜单
        const fileOptions = ref([
            { label: "测试", key: "ceshi01", },
            { label: "测试", key: "ceshi02", },
            { label: "测试", key: "ceshi03", },
            { label: "测试", key: "ceshi04", },
            { label: "测试", key: "ceshi05", },
            { label: "测试", key: "ceshi06", },
        ])
        const fileDropdown = ref(false)
        const fileX = ref(0)
        const fileY = ref(0)
        // 桌面右键菜单
        const desktopOptions = ref([
            { label: "测试01", key: "ceshi01", },
            { label: "测试02", key: "ceshi02", },
            { label: "测试03", key: "ceshi03", },
            { label: "测试04", key: "ceshi04", },
            { label: "测试05", key: "ceshi05", },
            { label: "测试06", key: "ceshi06", },
        ])
        const showDropdown = ref(false)
        const desktopX = ref(0)
        const desktopY = ref(0)
        const closeDropdown = () => {
            showDropdown.value = false
            fileDropdown.value = false
        }
        const clickOption = (key: string) => {
            closeDropdown()
        }
        // 右键点击桌面
        const showDropdownFunc = (e: MouseEvent) => {
            e.preventDefault()
            showDropdown.value = false
            fileDropdown.value = false
            nextTick(() => {
                desktopX.value = e.clientX
                desktopY.value = e.clientY
                showDropdown.value = true
            })
        }
        // 右键点击文件
        const fileDropdownFunc=(e: MouseEvent)=>{
            e.stopPropagation()
            e.preventDefault()
            showDropdown.value = false
            fileDropdown.value = false
            nextTick(() => {
                fileX.value = e.clientX
                fileY.value = e.clientY
                fileDropdown.value = true
            })
        }
        /**********************************************************************************
        * 生命周期和初始化区域
        ***********************************************************************************/
        onMounted(() => {
            getrowsNum()
            window.addEventListener("resize", () => {
                getrowsNum()
            })
        })
        onUnmounted(() => {
            window.removeEventListener("resize", () => {
                getrowsNum()
            })
        })
        return () => (
            <Maincontainer class="bg-opacity-0">
                <div class="absolute top-0 left-0 right-0 bottom-40px overflow-x-auto overflow-y-hidden grid grid-flow-col auto-rows-min auto-cols-min gap-2 p-4" style={{"grid-template-rows":`repeat(${rowsNum.value},1fr)`}} onContextmenu={showDropdownFunc}>
                    {() => tableData.value.map((item, index) => {
                        return <div class="juzhong1 border border-white cursor-pointer bg-white bg-opacity-0 hover:bg-opacity-50" style={{ "width": `90px`, "height": `${desktopSize.value}px`, }} onContextmenu={fileDropdownFunc}>
                            <span>{index + "元素"}</span>
                        </div>
                    })}
                </div>
                <div class="absolute h-40px bottom-0 left-0 right-0">
                    底部
                </div>
                <NDropdown
                    placement={"bottom-start"}
                    trigger={"manual"}
                    x={desktopX.value}
                    y={desktopY.value}
                    options={desktopOptions.value}
                    show={showDropdown.value}
                    onClickoutside={closeDropdown}
                    onSelect={clickOption}
                />
                <NDropdown
                    placement={"bottom-start"}
                    trigger={"manual"}
                    x={fileX.value}
                    y={fileY.value}
                    options={fileOptions.value}
                    show={fileDropdown.value}
                    onClickoutside={closeDropdown}
                    onSelect={clickOption}
                />
            </Maincontainer>
        )
    },
})
